<template>
    <div class="cart-box">
        <div class="cart-box-title display-flex">
            <div class="cart-box-title-left">
                订单编号：{{ props.item.id }}
            </div>
        </div>
        <div class="cart-box-main display-flex">
            <div class="cart-box-main-left">
                <van-image width="38.666667vw" height="38.666667vw" fit="cover" lazy-load
                    :src="props.item.goods_images[0]" />
            </div>
            <div class="cart-box-main-right">
                <div class="box-main-right-title van-multi-ellipsis--l2">{{ props.item.name }}</div>
                <div class="box-main-right-price font-size-32 text-red">￥{{ props.item.price }}</div>
                <div class="box-main-right-code text-color9 font-size-28 display-flex margin-top-20">
                    <div class="invitation-code font-size-26">库存：{{ props.item.buy_num }}</div>
                </div>
                <div class="box-main-right-code text-color9 font-size-28 display-flex margin-top-10">
                    <div class="invitation-code font-size-26">上架时间：{{ props.item.updatetime }}</div>
                </div>
            </div>
        </div>
        <div class="cart-box-footer display-flex">
            <van-button type="primary" size="small" round plain color="#ED1850">申请提货</van-button>
            <van-button type="primary" size="small" round plain color="#ED1850">申请上架</van-button>
        </div>
    </div>
</template>

<script setup>
import copy from '@image/Cart/icon_01.png'

let props = defineProps({
    item: {
        type: Object,
    }
});
let copyTextToClipboard = (text, name) => {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            console.log(name + '文本已成功复制到剪切板！‌');
        }).catch(err => {
            console.error(name + '复制文本失败：‌', err);
        });
    } else {
        console.log('浏览器不支持剪切板API！‌');
    }
}
</script>

<style lang="scss" scoped>
.cart-box {
    margin: 40px 0;
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px;
}

.cart-box-title {
    height: 60px;
    line-height: 60px;
}

.cart-box-title-left {
    flex: 1;
}

.cart-box-title-right {
    max-width: 180px;
}

.cart-box-main {
    padding: 10px 0;
}

.cart-box-main-left {
    width: 290px;
    height: 290px;
    border-radius: 5px;
    overflow: hidden;
}

.cart-box-main-right {
    padding-left: 20px;
    flex: 1;
}

.box-main-right-title {
    height: 88px;
    line-height: 180%;
}

.box-main-right-price,
.box-main-right-code,
.user-icon {
    height: 48px;
    line-height: 48px;
}

.user-icon {
    padding: 5px 15px;
    margin-right: 10px;
    vertical-align: middle;
    color: var(--white);
    border-radius: 10px 0 10px 0;
}

.user-icon-bg1 {
    background-color: #7A8EF7;
}

.user-icon-bg2 {

    background-color: #F78B7A;
}

.box-main-right-code,
.user-icon {
    height: 40px;
    line-height: 40px;
}

.invitation-code {
    
}

.invitation-copy {
    flex: 1;
}

.cart-box-footer-left,
.cart-box-footer-right {
    flex: 1;
}

.cart-box-footer {
    height: 70px;line-height: 70px;justify-content: flex-end;
    button{margin-left: 20px;}
}
</style>